<template>
  <div class="article-item  ">
    <!-- 左边图片 -->
    <div class="article_new_left_img">
      <a href="">
        <img
          :src="article.aetImg"
          alt=""
        />
      </a>
    </div>
    <!-- 右边信息 -->
    <div class="article_new_right_content">
      <div class="article_right_one">
        <div class="biaoti">
          <div class="classifiction"><a href="#" v-for="(item,index) in article.documentTypes" :key="index" :docId="item.docId"> {{ item.docName}}</a></div>
        </div>
        <div class="create_time">
          <div class="time">
             
            <span> <i class="iconfont icon-shizhong"></i>    {{ article.artTime}}</span>
          </div>
        </div>
      </div>
      <div class="article_right_two" :artId="article.artId">
        <router-link :to="'/aab/'+article.artId">{{ article.artTitle}}</router-link>
      </div>
      <div class="article_right_three">
        {{ article.artDescribe}}
      </div>
      <div class="article_right_four">
        <div class="article_user">
          <span >
            <img :src="article.user.userImg" alt="">
          </span>
          <span v-if="article.user.userName == null">{{article.user.userNickname}}</span>
          <span v-else>{{article.user.userName}}</span>
        </div>
        <ul class="post-list-meta">
          <li class="post-list-meta-like">
            <span
              ><i class="iconfont icon-aixin"></i>
              <span class="s">{{article.artThumbsSize}}</span></span
            >
          </li>
          <li class="post-list-meta-comment">
            <span
              ><i class="iconfont icon-xinxi"></i>
              <span class="s">{{article.artCommentsSize}}</span></span
            >
          </li>
          <li class="post-list-meta-views">
            <span
              ><i class="iconfont icon-icon"></i>
              <span class="s">{{article.artBrowseSize}}</span></span
            >
          </li>
        </ul>
      </div>
    </div>
    <!-- 左边信息 -->
  </div>
</template>

<script>
export default {
  name: "ArticleContent",
  props:['article'],

};
</script>

<style scoped>
.article_user span >img{
      width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #ccc;
    position: relative;
}
.article_user span:nth-child(1){
  position: absolute;
      top: -6px;
}
.article_user span:nth-child(2){
 position: absolute;
    font-size: 14px;
    top: 0px;
    margin-left: 32px;
    
    width: 70px;
    /* display: block; */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.article-item {
  width: 100%;
  height: 170px;
  background-color: #fff;
  margin-left: 20px;
  margin-top: 23px;
  border-radius: 10px;
  box-shadow: 0px 0px 15px 0px #ccc;
  position: relative;
transition: all 0.5s !important;
}
.article-item:hover{
  
  transform: scale(1) translateY(-2px) translateZ(5px) !important;
  background: #f1f2f3;
}
.article-item:nth-child(odd) {
  margin-left: 0;
}
/* 左边图片 */
.article-item .article_new_left_img {
  height: 89%;
  width: 42%;
  background-color: aqua;
  position: absolute;
  top: 11px;
  left: 8px;
  overflow: hidden;
  border-radius: 10px;
}
.article-item .article_new_left_img > a > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  transition: 0.5s;
}
.article-item .article_new_left_img > a > img:hover {
  transform: scaleX(1.05) scaleY(1.05);
}
/* 右边信息 */
.article-item .article_new_right_content {
  width: 52%;
  height: 94%;
  position: absolute;
  right: 4px;
  top: 5px;
}
.article-item .article_new_right_content .article_right_one {
  width: 100%;
  height: 15%;
  display: flex;
}
.article_right_one .biaoti {
  width: 60%;
  height: 100%;
}
.article_right_one .create_time {
  width: 40%;
  height: 100%;
}
.classifiction{
  display: flex;
  overflow: hidden;
}
.classifiction a {
  font-size: 12px;
  border-radius: 7px;
  margin-right: 10px;
  letter-spacing: 1px;
  margin-bottom: 2px;
  white-space: nowrap;
  background-color: rgba(40, 130, 197, 0.1);
  color: #2882c5 !important;
  padding: 2px 7px;
  height: 19px;
  display: inline-block;
  line-height: 19px;
  
}
.time {
  position: relative;
}
.time > span {
  color: #2882c5;
  font-size: 12px;
  position: absolute;
  right: 9px;
  top: 3px;
}
.article-item .article_new_right_content .article_right_two {
  width: 98%;
  height: 25%;
  margin-top: 3px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-justify: inter-ideograph;
  word-break: break-all;
}
.article_right_two > a {
  font-size: 14px;
  font-weight: bold;
  color: black;
  margin-top: 5px;
}
.article_right_two > a:hover {
  color: #2882c5;
}
.article-item .article_new_right_content .article_right_three {
  width: 98%;
  height: 38%;
  font-size: 14px;
  color: #797c80;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-justify: inter-ideograph;
  word-break: break-all;
}


.article-item .article_new_right_content .article_right_four {
  width: 100%;
  height: 17%;
  margin-top: 10px;
  position: relative;
}

 .post-list-meta {
    font-size: 13px;
    width: 50%;
    position: absolute;
    right: 10px;
    top:5px;
    display: flex;
    justify-content: space-between;
     cursor: pointer;
}

.s{
    color: #2882c5;
    margin-left: 3px;
}
.post-list-meta>li>span>i{
  color: #2882c5;
}
.post-list-meta span>i:hover{
  color: red;
}
</style>